<template>
  <div class="weather-info">
    <i :class="weatherIcon"></i>
    <div class="weather">
      <div>
        <span>室外温度：</span>
        <span class="text-white"> {{ weather.temp || "--" }}℃</span>
      </div>
      <div>
        <span>室外湿度：</span>
        <span class="text-white">{{ weather.humidity || "--" }}%</span>
      </div>
    </div>
    <div class="text-white text-right" v-if="!isMobile">
      <div class="date">{{ date }}</div>
      <div class="time">{{ time + " " + week }}</div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { computed, defineComponent, reactive, toRaw, toRefs, watch } from "vue";
import store from "../../../store";

export default defineComponent({
  name: "WeatherInfo",
  setup(props) {
    const state = reactive({
      date: "",
      time: "",
      week: "",
      weather: {},
    });

    /** -----适配移动端 start -----**/
    const isMobile = computed(() => store.getters.dataVMobile);
    /** -----适配移动端 end -----**/

    const getDateTime = () => {
      const today = moment();
      const dateTime = today.format("YYYY/MM/DD HH:mm");
      const dateTimeArr = dateTime.split(" ");
      state.date = dateTimeArr[0];
      state.time = dateTimeArr[1];
      const week = today.weekday();
      state.week = `星期${WEEK_OBJ[week]}`;
      setTimeout(() => {
        getDateTime();
      }, 1000);
    };

    watch(
      () => store.getters.weather,
      () => {
        getWeatherInfo();
      }
    );

    const weatherIcon = computed(() => {
      if (state.weather.icon) {
        return `weather-icon qi-${state.weather.icon}`;
      }
      return "weather-icon";
    });

    const getWeatherInfo = () => {
      state.weather = store.getters.weather || {};
      // console.log("--------------weather info", toRaw(state.weather));
    };

    const init = () => {
      getDateTime();
      getWeatherInfo();
    };

    init();

    return {
      weatherIcon,
      isMobile,
      ...toRefs(state),
    };
  },
});

const WEEK_OBJ = {
  0: "一",
  1: "二",
  2: "三",
  3: "四",
  4: "五",
  5: "六",
  6: "日",
};
</script>
<style lang="less" scoped>
@import "../styles/common.less";
@import "../styles/weather/qweather-icons.css";
.weather-info {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  .weather-icon {
    font-size: 3.6rem;
    color: rgba(255, 255, 255, 1);
  }
  .weather {
    margin: 0 1.2rem 0 2rem;
  }
}
</style>
